page{
  height: 100vh;
  background-color: rgb(228, 246, 255);
}
//轮播图区域样式
.swiper{
  swiper{
    height: 400rpx;
    background-color: rgb(243, 178, 203);
    swiper-item{

      image{
        width: 100%;
        height: 100%;
      }
      &:first-child{
        background-color: rgb(160, 179, 230);
      }

      &:last-child{
        background-color: rgb(220, 224, 178);
      }
    }
  }
  
}
//导航区域
.good-nav{
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 252, 252, 0.938);
  padding: 40rpx 10rpx;
  border-radius: 10rpx;
  view{
    display: flex;
    flex-direction: column;
    align-items: center;
    image{
      width:110rpx;
      height: 110rpx;
    }
    text{
      font-size: 30rpx;
      margin-top: 12rpx;
    }
  }

}
/* 容器样式 */
.btn-group {
  display: flex;                  /* 启用flex布局 */
  justify-content: space-around;  /* 均匀分布带间距 */
  padding: 20rpx;                 /* 内边距 */
  flex-wrap: wrap;                /* 允许换行 */
}

/* 单个按钮样式 */
.custom-btn {
  width: 160rpx;                  /* 固定宽度 */
  height: 160rpx;                 /* 固定高度 */
  display: flex;
  flex-direction: column;         /* 垂直排列内部元素 */
  align-items: center;            /* 水平居中 */
  justify-content: center;        /* 垂直居中 */
  margin: 12rpx;                  /* 边距 */
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);  /* 阴影效果 */
}

/* 图标样式 */
.btn-icon {
  width: 64rpx;                   /* 图标尺寸 */
  height: 64rpx;
  margin-bottom: 12rpx;           /* 图标与文字间距 */
}

/* 文字样式 */
.btn-text {
  font-size: 24rpx;               /* 文字大小 */
  color: #333;                    
  line-height: 1.4;
}
/* 回收站模块样式 */
.recycle-section {
  margin: 40rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,100,0,0.08);
}

.section-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f0f0f0;

  .section-title {
    font-size: 36rpx;
    color: #006400;
    font-weight: bold;
  }

  .location-info {
    display: flex;
    align-items: center;
    .location-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
    .distance {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.map-container {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.station-list {
  max-height: 800rpx;
  .station-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .station-icon {
      width: 80rpx;
      height: 80rpx;
      margin-right: 30rpx;
    }

    .info-box {
      flex: 1;
      .top-line {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        .station-name {
          font-size: 32rpx;
          color: #333;
          margin-right: 20rpx;
        }
        .status-tag {
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: 6rpx;
          &.open {
            background: #e8f5e9;
            color: #006400;
          }
          &.close {
            background: #f0f0f0;
            color: #666;
          }
        }
      }
      .station-address {
        display: block;
        font-size: 26rpx;
        color: #666;
        margin-bottom: 15rpx;
      }
      .bottom-line {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        color: #888;
      }
    }

    .arrow-icon {
      width: 36rpx;
      height: 36rpx;
      margin-left: 20rpx;
    }
  }
}

